<template>
  <div>
    <el-card class="top">
      <el-button
        type="primary"
        @click="isShowDialog = true"
      >添加页面</el-button>
      <el-input
        v-model="title_contains"
        class="input"
        placeholder="请输入标题名称"
      />
      <el-button type="success" @click="searchFn">筛选</el-button>
    </el-card>
    <el-card>
      <!-- 表格主体 -->
      <el-table :data="pagesList" border>
        <el-table-column label="标题" prop="title" />
        <el-table-column label="内容" prop="content" />
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button size="mini" type="primary" @click="editFn(row.id)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="delFn(row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <div class="block">
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          :page-size="pageConfig._limit"
          @current-change="currentChangeFn"
        />
      </div>

      <!-- diaolog弹窗 -->
      <el-dialog
        v-if="isShowDialog"
        :title="addPageList.id ? '编辑页面' : '新增页面'"
        :visible="isShowDialog"
        @close="cancleFn"
      >
        <el-form ref="pageForm" :model="addPageList" :rules="rules">
          <el-form-item label="标题" prop="title">
            <el-input v-model="addPageList.title" placeholder="关于我们" />
          </el-form-item>

          <!-- 富文本框 -->
          <el-form-item label="内容" prop="content">
            <!-- 富文本(使用说明)
                     富文本插槽的使用步骤
                     1、下载 npm install vue-word-editor --save
                     2、引入
                        import VueEditor from 'vue-word-editor';
                        import 'quill/dist/quill.snow.css';
                     3、注册
                        components: { VueEditor }
                     4、使用
                        <VueEditor></VueEditor>
                     5、添加配置
                        5-1、配置信息需要在data函数的返回对象中声明
                            config: {
                            // 上传图片的配置
                                uploadImage: {
                                    url: "http://localhost:3000/upload",//文章上传到服务器端的处理路径
                                    name: "file",//后台所需要的参数的名称
                                    headers: "",//设置请求头信息
                                    // res是结果，insert方法会把内容注入到编辑器中，res.data.url是资源地址
                                    uploadSuccess(res, insert){
                                    insert("http://localhost:3000" + res.data.url)//文件上传之后的回调，接收服务器响应回来的数据，根据服务器的地址进行填充
                                    }
                                },
                            }
                        5-2、把配置添加到组件标签上
                        <VueEditor :config="config"></VueEditor>
                     -->
            <VueEditor ref="vueEditor" :config="config" />
          </el-form-item>

          <div>
            <el-button
              class="btn"
              size="small"
              @click="cancleFn"
            >取消</el-button>
            <el-button
              type="primary"
              size="small"
              @click="confirmFn"
            >确定</el-button>
          </div>
        </el-form>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {
  getPages,
  getPagesTotal,
  addPage,
  getPageById,
  editPage,
  delPage
} from '@/api/pages'
import VueEditor from 'vue-word-editor'
import 'quill/dist/quill.snow.css'
export default {
  components: { VueEditor },
  data() {
    return {
      isShowDialog: false, // 弹窗显隐
      pagesList: [], // 页面列表
      pageConfig: {
        _limit: 5,
        _start: 0
      },
      total: 0, // 页面总数

      //  富文本配置， 禁止富文本组件报错
      config: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // toggled buttons
            ['blockquote', 'code-block'],

            [{ header: 1 }, { header: 2 }], // custom button values
            [{ list: 'ordered' }, { list: 'bullet' }],
            [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
            [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
            [{ direction: 'rtl' }], // text direction

            [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
            [{ header: [1, 2, 3, 4, 5, 6, false] }],

            [{ color: [] }, { background: [] }], // dropdown with defaults from theme
            [{ font: [] }],
            [{ align: [] }],

            ['clean']
          ]
        }
      },

      // 新增页面内容列表
      addPageList: {
        content: '', //  富文本输入框内容
        title: '' //  标题内容
      },

      title_contains: '', // 搜索输入框内容
      rules: {
        title: [
          { required: 'true', message: '标题不能为空！', trigger: 'blur' },
          {
            min: 1,
            max: 30,
            message: '标题长度要求1~30个字',
            trigger: 'blur'
          }
        ],
        content: [
          { required: 'true', message: '内容不能为空！', trigger: 'blur' },
          {
            min: 1,
            max: 500,
            message: '内容长度要求1~500个字',
            trigger: 'blur'
          }
        ]
      }
    }
  },

  async created() {
    // 获取页面列表
    this.getPageList()
    // 获取页面总数
    this.total = await (await getPagesTotal()).data
  },

  methods: {
    // 删除功能
    delFn(id) {
      // 弹出二次确认框
      this.$confirm('确认删除吗？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          await delPage(id)
          this.$message.success('删除成功')
          // 刷新列表
          this.getPageList()
        })
        .catch(() => {
          this.$message.error('已取消删除')
        })
    },

    // 搜索功能
    async searchFn() {
      // 把页码下标设为0，强制显示第一页
      this.pageConfig._start = 0
      const res = await getPages({
        ...this.pageConfig,
        title_contains: this.title_contains
      })
      // 结果赋值给页面列表
      this.pagesList = res.data

      // 动态设置：分页器页数
      if (this.title_contains) {
        this.total = await (
          await getPagesTotal({ title_contains: this.title_contains })
        ).data
      } else {
        this.total = await (await getPagesTotal()).data
      }
    },

    // 编辑功能
    async editFn(id) {
      this.isShowDialog = true
      // 回显数据
      const res = await getPageById(id)
      this.addPageList = res.data
      // 回显富文本内容
      this.$refs.vueEditor.editor.root.innerHTML = res.data.content
    },

    // 点弹窗确定按钮
    async confirmFn() {
      //  validate() 校验通过后才能执行下方代码
      this.$refs.pageForm.validate()

      // 判断  （新增/编辑）  ？
      if (this.addPageList.id) {
        // 编辑
        // 获取富文本最新数据
        this.addPageList.content = this.$refs.vueEditor.editor.root.innerHTML
        const res = await editPage(this.addPageList)
        // 弹窗显示（结果）
        if (res.request.status == 200) {
          this.$message.success('编辑成功！')
        } else {
          this.$message.error('编辑失败！')
        }
      } else {
        // 新增
        // 获取富文本输入框内容
        this.addPageList.content = this.$refs.vueEditor.editor.root.innerHTML
        // 发新增请求
        const res = await addPage(this.addPageList)
        // 弹窗显示（结果）
        if (res.request.status == 200) {
          this.$message.success('新增成功！')
        } else {
          this.$message.error('新增失败！')
        }
      }

      // 刷新列表
      this.getPageList()
      this.total = await (await getPagesTotal()).data
      // 关闭弹窗
      this.isShowDialog = false
    },

    // 获取页面列表
    async getPageList() {
      this.pagesList = await (await getPages(this.pageConfig)).data
    },

    // 监听分页器变化，改变页码发请求
    async currentChangeFn(newPage) {
      // 设置  _start  ：每页开始显示的下标值
      this.pageConfig._start = (newPage - 1) * this.pageConfig._limit
      // 重新获取,带搜索参数的页面列表
      this.pagesList = await (
        await getPages({
          ...this.pageConfig,
          title_contains: this.title_contains
        })
      ).data
    },

    cancleFn() {
      // 关闭弹窗
      this.isShowDialog = false
      // 清空输入框
      this.addPageList = {}
      // 清空检验规则
      this.$refs.pageForm.resetFields()
    }
  }
}
</script>

<style lang='scss' scoped>
.input {
  width: 400px;
  margin-left: 400px;
}
.block {
  margin-top: 18px;
  text-align: center;
}
</style>
